<!--
 * @Description:
 * @Author: your name
 * @version:
 * @Date: 2024-05-09 13:32:21
 * @LastEditors: your name
 * @LastEditTime: 2024-05-09 13:57:14
-->
<template>
  <div class="activity">
    <vue3-seamless-scroll :list="list" class="scroll" :hover="true" :step="0.4">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span class="message">{{ item.message }}</span>
        <span class="time">{{ item.time }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

export default defineComponent({
  name: "App",
  components: {
    Vue3SeamlessScroll,
  },
  setup() {
    const data = [];
    for (let i = 0; i < 100; i++) {
      data.push({
        message: "7月31日,全线20座车站封顶",
        time: "2022-05-01",
      });
    }

    const list = ref(data);
    return { list };
  },
});
</script>

<style>
.activity{
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: all;
}

.activity .scroll{
  height: 240px;
  margin: 10px;
  overflow: hidden;
}

.item{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 30px;
  padding-right: 60px;
}

.item>span:first-child{
  color:#5dcad0;
}

.item>span:last-child{
  color: #667eb8;
  font-weight: bold;
}
</style>
